// import React, { useState } from 'react';
import MyEditor from './MyEditor';
import '../../static/font/iconfont.css'
import { Form, Input, Button, Select, Image, Modal, Space } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import './articleAdd.scss'
import { useNavigate } from 'react-router-dom';
import Avatar from './Avatar'
import { useState,useEffect } from 'react';
import http from '../../utils/http';
import store from '../../store';
const { Option } = Select;
const { confirm } = Modal;
const layout = {
    labelCol: {
        span: 6,
    },
    wrapperCol: {
        span: 14,
    },
};

const Article_add = () => {
    const navigate=useNavigate();
    // useEffect(()=>{
    //     console.log('富文本组件-文章新增',store.lijuhua.a)
    //     form2.getFieldsValue({
    //         content:store.lijuhua.a
    //     })
    //     console.log(form2.getFieldValue().content);
    // },[])

    //返回页面
    const backCar = () => {
      navigate('/home/Operate/ArticlePublishingManagement');
      console.log(form1.getFieldValue().title);

    // console.log(html);
    }
    const baocun=()=>{
        http({
            url:'/article/insertArticle',
            method:'post',
            params:{
                  artTitle:form1.getFieldValue().title,
                  artChannel:form1.getFieldValue().avenues,
                  artDitch:form1.getFieldValue().channel,
                  artType:form1.getFieldValue().type,
                  artKeyWord:form1.getFieldValue().tikeywordtle,
                  art_introduction:form1.getFieldValue().overview,
                  art_img:form2.getFieldValue().face,
                  art_temp:store.lijuhua.a
            }
        }).then((res)=>{
            console.log('文章内容新增',res);
        })
    }
    const quxiao = () => {
        confirm({
            icon: <ExclamationCircleOutlined />,
            content: '您确定离开此页面吗？',
            cancelText: '取消',
            okText: '确定',
            onOk() {
                //   console.log('OK');
                backCar()
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }
    const [form1] = Form.useForm();
    const [form2] = Form.useForm();
    const onFinish = (values) => {
        console.log(values);
    };

    return (
        <div className="xinzeng">
            <div>
                {/* 第一部分：header头部信息 */}
                <div className='tit'>
                    {/* 左边部分：标题 */}
                    <div>
                        <div>
                            <div></div>
                            <div>文章内容新增</div>
                        </div>
                    </div>
                    {/* 右边部分：小叉叉——离开页面的功能 */}
                    <div>
                        <span className="iconfont icon-a-16guanbi" onClick={backCar}></span>
                    </div>
                </div>
                <hr></hr>
                {/* 第二部分：content内容 */}
                <div className='content'>
                    {/* 左边部分 */}
                    <div>
                        <Form {...layout} form={form1} name="control-hooks" onFinish={onFinish}>
                            <Form.Item
                                name="title"
                                label="文章标题"
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Input placeholder="请输入文章标题" />
                            </Form.Item>
                            <Form.Item
                                name="avenues"
                                label="发布渠道"
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Select
                                    placeholder="请选择"
                                    allowClear
                                >
                                    <Option value='小程序'>小程序</Option>
                                    <Option value='官网'>官网</Option>
                                </Select>
                            </Form.Item>
                            <Form.Item
                                name="channel"
                                label="发布频道"
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Select
                                    placeholder="请选择"
                                    allowClear
                                >
                                    <Option value='今日热点'>今日热点</Option>
                                    <Option value='推荐'>推荐</Option>
                                </Select>
                            </Form.Item>
                            <Form.Item
                                name="type"
                                label="文章类型"
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Select
                                    placeholder="请选择"
                                    allowClear
                                >
                                    <Option value='图文'>图文</Option>
                                    <Option value='视频'>视频</Option>
                                </Select>
                            </Form.Item>
                            <Form.Item
                                name="keyword"
                                label="关键词"
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Input placeholder="请输入关键词" />
                            </Form.Item>
                            <Form.Item
                                name="introduction"
                                label="文章简介"
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Input.TextArea placeholder="请输入文章简介" />
                            </Form.Item>
                            
                        </Form>
                    </div>
                    {/* 右边部分 */}
                    <div>
                        <div>
                            <div className='right'>
                                <Form form={form2} name="control-hooks" onFinish={onFinish}>
                                    <Form.Item
                                        name="face"
                                        label="文章封面"
                                        rules={[
                                            {
                                                required: true,
                                            },
                                        ]}
                                    >
                                        {/* <Image
                                            width={100}
                                            src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                                        /> */}
                                        <Avatar />
                                    </Form.Item>
                                    <Form.Item
                                        name="content"
                                        label="文章内容"
                                        rules={[
                                            {
                                                required: true,
                                            },
                                        ]}
                                    >
                                        <MyEditor />
                                    </Form.Item>
                                </Form>
                            </div>
                        </div>
                    </div>
                </div>
                {/* 第三部分：保存 取消按钮 */}
                <div className='btn'>
                    <Form.Item>
                        <Space size='large'>
                            <Button type="primary" htmlType="submit" onClick={baocun}> 
                                保存
                            </Button>
                            <Button onClick={quxiao}>
                                取消
                            </Button>
                        </Space>
                    </Form.Item>
                </div>
            </div>
        </div>)
}


export default Article_add;